<template>
	<view style="margin-top: 40rpx;" @click="showSelector=!showSelector">
		<view class="maskbox" v-show="showSelector&&showMask"></view>
		<view class="uni-combox" :style="{zIndex:showSelector?999:1}">
			<view class="uni-combox__input-box">
				<view class="combox_input_view">
					<up-input 
						placeholder="请选择店铺" 
						border="surround" 
						shape="circle"
						v-model="inputVal"
					>
						<template #suffix>
							<up-icon name="arrow-down" color="#DDDDDD" size="28" @click="toggleSelector"></up-icon>
						</template>
					</up-input>
					<view class="uni-combox__selector" v-if="showSelector">
						<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
							<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
								<text>{{emptyTips}}</text>
							</view>
							<view class="uni-combox__selector-item" v-for="(boxname,boxIdx) in props.candidates" :key="boxIdx"
								@click.stop="onSelectorClick(boxIdx)"
							>
								<text>{{boxname}}</text>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref, computed, onMounted, onBeforeUnmount, watch} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	const props = defineProps(['candidates', 'emptyTips'])
	const emit = defineEmits(['selectorClick','onChange'])
	
	let showSelector = ref(false);
	let inputVal = ref('');
	let selectList = ref([])
		
	const filterCandidatesLength = computed(() => {
		return props.candidates.length
	})
	let value = watch(() => inputVal.value, (newVal) => {
		emit('onChange', newVal)
	}, {
		immediate: true
	})
	
	const toggleSelector = () => {
		showSelector.value = !showSelector.value
	}
	
	const onSelectorClick = (index) => {
		inputVal.value = props.candidates[index];
		emit('selectorClick', index)
		showSelector.value = false
	}
</script>

<style scoped>
	.uni-combox {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		min-height: 40px;
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	.uni-combox__label {
		font-size: 16px;
		line-height: 22px;
		padding-right: 10px;
		color: #999999;
	}

	.uni-combox__input-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: column;
	}

	.combox_tags {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.combox_tag {
		padding: 10rpx 15rpx;
		background-color: #F0F2F5;
		color: #94979D;
		margin-right: 10rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.combox_tag .tag_name {
		margin-right: 10rpx;
	}

	.combox_input_view {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		align-items: center;
		min-width: 100%;
	}

	.uni-combox__input {
		flex: 1;
		font-size: 16px;
		height: 22px;
		line-height: 22px;
	}

	.uni-combox__input-arrow {
		padding: 10px;
	}

	.uni-combox__selector {
		height: 200rpx;
		overflow: auto;
		box-sizing: border-box;
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 6px;
		box-shadow: #DDDDDD 4px 4px 8px, #DDDDDD -4px -4px 8px;
		z-index: 2;
	}

	.uni-combox__selector-scroll {
		box-sizing: border-box;
	}

	.uni-combox__selector::before {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		border-bottom: solid 6px #FFFFFF;
		border-right: solid 6px transparent;
		border-left: solid 6px transparent;
		left: 50%;
		top: -6px;
		margin-left: -6px;
	}

	.uni-combox__selector-empty,
	.uni-combox__selector-item {
		/* #ifdef APP-NVUE */
		display: flex;
		/* #endif */
		line-height: 36px;
		font-size: 14px;
		text-align: center;
		border-bottom: solid 1px #DDDDDD;
		/* margin: 0px 10px; */
	}

	.uni-combox__selector-empty:last-child,
	.uni-combox__selector-item:last-child {
		border-bottom: none;
	}

	.maskbox {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 99;
	}
</style>